<template>
	<div class="confirm-room">
    <div class="r01">
      <!-- <x-input :show-clear="false"title="钥匙是否签收：" v-model="value" placeholder="张鱼饭"></x-input> -->
      <checklist class="check-btn clearfix" :max="1" title="钥匙是否签收：" required :options="commonList" v-model="checklist"></checklist>
    </div>
    <div class="r02">
      请上传水电表，燃气表清单：
    </div>
    <div class="r03">
      <label class="input" for="file1">
        <input id="file1" style="display:none;" type="file" >
        <img :src="meterList[0]" alt="">
      </label>
    </div>
    <div class="r04">
      请上传家电家私清单：
    </div>
    <div class="r03">
      <label class="input" for="file2">
        <input id="file2" style="display:none;" type="file" >
        <img :src="furnitureList[0]" alt="">
      </label>
    </div>
    <div class="r03">
      <label class="input" v-for="(item, index) in uploadInputs" :for="item.id">
        <input :id="item.id" style="display:none;" type="file" >
        <img :src="item.img" alt="">
      </label>
    </div>
    
    <!-- <x-button class="" @click.native="addUpload" type="primary">zengjian</x-button> -->
    <x-button class="confirm" @click.native="submit" type="primary">确定</x-button>
	</div>
</template>

<script>
import { Checklist } from 'vux'
import UploadFileByTXY from '../../../../util/uploadFileByTXY'
export default {
  name: 'jiao-fang-que-ren',
  components: {
    Checklist
  },
  data () {
    const bgimg = require('../../../../images/rentHouse/uploadImg.png')
    return {
      meterList: [bgimg, bgimg, bgimg],
      furnitureList: [bgimg, bgimg, bgimg],
      value: '',
      commonList: [{key: '0', value: '未签收'}, {key: '1', value: '已签收'}],
      checklist: [],
      uploadInputs: []
    }
  },
  methods: {
    submit () {
      let data = {status: 1, contractId: this.$route.query.contractId, turnedKey: this.checklist[0], meterList: 'meterList', furnitureList: 'furnitureList'}
      this.$axiosPosting(this.$api.insertContractTransfer, data).then(res => {
        if (res.code === '0000') {
          this.$vux.toast.text('确认交房成功')
          this.$router.go(-1)
        }
      })
    },
    addUpload () {
      let bgimg = require('../../../../images/rentHouse/uploadImg.png')
      let id = (Math.random() * 1000000).toFixed(0)
      let newUp = {img: bgimg, id: id}
      this.uploadInputs.push(newUp)
      this.$nextTick(() => {
        UploadFileByTXY.upload({
          id: id,
          callback: (res) => {
            newUp.img = res.url
          }
        }, true)
      })
    }
  },
  mounted () {
    let _this = this
    UploadFileByTXY.upload({
      id: 'file1',
      callback: (res) => {
        let temp = [..._this.meterList]
        temp[0] = res.url
        _this.meterList = temp
      }
    }, true)
    UploadFileByTXY.upload({
      id: 'file2',
      callback: (res) => {
        let temp = [..._this.furnitureList]
        temp[0] = res.url
        _this.furnitureList = temp
      }
    }, true)
  }
}
</script>

<style lang="less" scoped>
	.confirm-room {
    padding: 0 18px;
    font-size: 15px;
    .r01 {
      margin: 5px 0;
    }
    .r02, .r03, .r04 {
      margin-bottom: 10px;
      position: relative;
      z-index: 10;
      label {
        width: 175px;
        display: inline-block;
        border: 1px solid #e4e4e4;
        text-align: center;
        vertical-align: middle;
        border-radius: 4px;
      }
      img {
        display: block;
        position: relative;
        z-index: -1;
        width: 111px;
        max-height: 88px;
      }

    }
    .r02, .r04 {
      margin-top: 14px;
    }

    .weui-cell {
      padding-left: 0;
      display: inline-block;
    }
    
    .confirm{
      position: absolute;
      bottom: 24px;
      width: ~"calc(100vw - 36px)";
    }

	}
</style>
<style lang="less">
.confirm-room {
  .r01 {
    .weui-cell__bd {
      font-size: 14px !important;
      position: relative;
    }
    .weui-cell {
      display: inline-block;
    }
    .weui-icon-checked:before {
      font-size: 16px;
      position: relative;
      top: -3px;
    }
  }
  .input {
    position: relative;
  }
  .check-btn {
    *::before,  *::after{
      border: 0;
    }
    .weui-cells__title,.weui-cells_checkbox {
      display: inline-block;
      float: left;
      margin-top: 10px;
      padding-left: 0;
    }
    .weui-cells_checkbox {
      position: relative;
      top: -2px;
    }
    .weui-cell__hd {
      font-size: 12px;
    }
    .weui-cell__hd,.weui-cell__bd {
      display: inline-block;
      padding-right: 0;
    }
    .weui-check_label {
      margin: 0;
      padding: 0;
    }
    .weui-cell__bd {
      position: relative;
      left: -4px;
    }
    .weui-check_label:last-child{
      margin-left: 14px;
    }
  }
}
.close-x {
  position: absolute;
  display: inline-block;
  right: -30px;
  top: 0;
  width: 30px;
  height: 30px;
  background: red;
  border-radius: 100%;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  &::before {
    content: "";
    width: 100%;
    height: 2px;
    background: white;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
  &::after {
    content: "";
    width: 2px;
    height: 100%;
    background: white;
    position: absolute;
    right: 50%;
    top: 0;
    transform: translateX(-50%);
  }
}
</style>
